<template>
    <div class="left-top">
        <div class="morning-check">
            <div class="check-title"><span class="title-info">晨检信息</span></div>
            <div class="check-info">
                <div class="info-left">
                    <div class="left-img"><img src="../components/img/people.png"/></div>
                    <div class="people-total">
                        <span class="total">188</span>
                        <span>人员总数</span>
                    </div>
                </div>
                <div class="info-right">
                    <div class="check-info">
                        <span class="info-title">今日晨检</span>
                        <span class="numbers">168</span>
                    </div>
                    <div class="heat-info">
                        <span class="info-title">温度异常</span>
                        <span class="numbers">2</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.left-top{
    height:227px;
    width:548px;
    background: url('../components/img/leftTop.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom:20px;
    transform: matrix(1, 0, 0, 1, 1, 0);
    transition-duration: 0ms;
}
.morning-check{
    padding:15px 20px;
    display:flex;
    flex-direction:column;
    .check-title{
        color:#fff;
        background: url('../components/img/title-bg.png') no-repeat;
        background-size: 100% 100%;
        height:36px;
        line-height:36px;
        .title-info{
            margin-left:40px;
        }
    }
    .check-info{
        display:flex;
        align-items:center;
        .info-left{
            display:flex;
            margin-right:8%;
            height:148px;
            .left-img{
                width:128px;
                height:148px;
                margin-right:15px;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .people-total{
                display:flex;
                flex-direction:column;
                color:#fff;
                margin-top:20px;
                .total{
                    font-size:32px;
                    font-weight:700;
                    margin-bottom:15px;
                    color:#7edcff;
                }
            }
        }
        .info-right{
            display:flex;
            flex-direction:column;
            margin:25px 0;
            div{
                background-size: 100% 100%;
                width:258px;
                height:57px;
                display:flex;
                justify-content: space-between;
                align-items:center;
                padding:0 18px;
                .info-title{
                    color:#d8e4ff;
                }
                .numbers{
                    font-size:20px;
                    font-weight:700px;
                }
                &.check-info{
                    background: url('../components/img/check-bg.png') no-repeat;
                    margin-bottom:12px;
                }
                &.heat-info{
                    background: url('../components/img/info-bg.png') no-repeat;
                }
        }
            }
            
    }
    // .total{
    //     font-size:18px;
    //     margin-left:30px;
    // }
}

</style>
